$(function () {
	let form = layui.form;
	const initCate = (data = '') => {
		$.ajax({
			url: '/my/article/cates',
			method: 'get',
			success: res => {
				if (res.status != 0) return layer.msg(res.message);
				let cate = ['<option value="">请选择文章类别</option>'];
				$.each(res.data, function (i, item) {
					if (data == item.Id) {
						cate.push(`<option value="${item.Id}" selected>${item.name}</option>`);
					} else {
						cate.push(`<option value="${item.Id}">${item.name}</option>`);
					}
				});
				$('[name="cate_id"]').empty().append(cate.join(''));
				// 一定要记得调用 form.render() 方法
				form.render();
			}
		});
	}
	initCate();

	// 初始化富文本编辑器
	initEditor();

	// 初始化图片裁剪器
	let $image = $('#image');
	// 裁剪选项
	let options = {
		aspectRatio: 400 / 280,
		preview: '.img-preview'
	}
	// 初始化裁剪区域
	$image.cropper(options);

	// 为选择封面的按钮 绑定点击事件处理函数
	$('#btnChooseImage').on('click', () => {
		$('#coverFile').click();
	})

	// 监听 coverFile 的 change 事件 获取用户选择的文件列表
	$('#coverFile').on('change', e => {
		// 获取到文件的列表数组
		let files = e.target.files;
		// 判断用户是否选择了文件
		if (files.length <= 0) return layer.msg('请选择图片! ');
		// 根据文件 创建对应的 URL 地址
		let newImgURL = URL.createObjectURL(files[0]);
		// 为裁剪区域重新设置图片
		$image
			.cropper('destroy')				// 销毁旧的裁剪区域
			.prop('src', newImgURL)		// 重新设置图片路径
			.cropper(options);				// 重新初始化裁剪区域
	});

	let art_state = '已发布';
	$('.publish').on('click', () => {
		art_state = '已发布';
	});
	$('.save-draft').on('click', () => {
		art_state = '草稿';
	});

	const publishArticle = (url, data) => {
		$.ajax({
			url: '/my/article/' + url,
			method: 'post',
			data: data,
			// 注意：如果向服务器提交的是 FormData 格式的数据
			// 必须添加以下两个配置项
			contentType: false,
			processData: false,
			success: res => {
				if (res.status != 0) return layer.msg(res.message);
				layer.msg(res.message);
				location.href = '/article/art_list.html';
			}
		});
	}

	let article = localStorage.getItem('article') || '';
	let art_id = null;
	const initPublishArticle = res => {
		art_id = res.data.Id;
		$('#form-pub [name="title"]').val(res.data.title);
		initCate(res.data.cate_id);
		$('#form-pub [name="content"]').val(res.data.content);
		// 为裁剪区域重新设置图片
		$image
			.cropper('destroy')				// 销毁旧的裁剪区域
			.prop('src', 'http://ajax.frontend.itheima.net' + res.data.cover_img)		// 重新设置图片路径
			.cropper(options);				// 重新初始化裁剪区域
		localStorage.removeItem('article');
	}
	if (article !== '') initPublishArticle(JSON.parse(article));

	$('#form-pub').on('submit', function (e) {
		e.preventDefault();
		// 基于 form 表单 快速创建一个 FormData 对象
		let formdata = new FormData(this);
		// 将文章的发布状态 存到 formdata 中
		formdata.append('state', art_state);
		// 将封面裁剪过后的图片 输出为一个文件对象
		$image.cropper('getCroppedCanvas', {
			// 创建一个 Canvas 画布
			width: 400,
			height: 280
		}).toBlob(blob => {
			// 将 Canvas 画布上的内容 转化为文件对象
			// 得到文件对象后 进行后续的操作
			// 将文件对象 存储到 formdata 中
			formdata.append('cover_img', blob);
			// 发起 ajax 数据请求
			if (article !== '') {
				formdata.append('Id', art_id);
				publishArticle('edit', formdata);
			} else {
				publishArticle('add', formdata);
			}
		});
	});
});